import { Input, Space, Table, Button, Popconfirm, Message } from '@arco-design/web-react';
import { fetchUserList } from '../../../../../../api/common' 
const InputSearch = Input.Search;
function List({state, setState}){
    const columns = [
        {
          title: '姓名',
          dataIndex: 'chineseName',
          key: 'chineseName'
        },
        {
          title: '单位',
          dataIndex: 'deptName',
          key: 'deptName'
        },
        {
            title: '职务',
            dataIndex: 'position',
            key: 'opsition'
        },
        {
          title: '账号',
          dataIndex: 'username',
          key: 'username'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          render: (col, record, index) => (
            <Popconfirm
                focusLock
                title='删除?'
                onOk={() => {
                    let tmp = [...state.list.data]
                    for (let i = 0; i < tmp.length; i ++){
                        if (tmp[i].id == record.id){
                            tmp.splice(i, 1)
                        }
                    }
                    setState(state=>{
                        return{
                            ...state,
                            list: {
                                ...state.list,
                                data: tmp
                            }
                        }
                    })
                    Message.info({
                        content: '已删除',
                    });
                }}
                onCancel={() => {
                Message.error({
                    content: '取消',
                });
                }}
        
            >
                <Button type='text'>删除</Button>
            </Popconfirm>
            
          ),
        },
    ]
    return(
        <div style={{boxSizing: 'border-box' ,padding: '14px', height: '100%', position: 'relative'}}>
            <Space wrap style={{position: 'absolute', left: '10px'}}>
                <InputSearch
                    searchButton='Search'
                    placeholder='搜索'
                    defaultValue={state.list.keyword}
                    onSearch={()=>{
                        setState(state=>{
                            return{
                                ...state,
                                list: {
                                    ...state.list,
                                    loading: true
                                }
                            }
                        })
                        fetchUserList({keyword: state.list.keyword},
                            (res)=>{
                                setState(state=>{
                                    return{
                                        ...state,
                                        list: {
                                            ...state.list,
                                            data: res.data.list,
                                            loading: false
                                        }
                                    }
                                })
                            },
                            (error)=>{
                                Message.error(error)
                        })
                    }}
                    style={{ width: 350 }}
                />
            </Space>
            <div style={{position: 'relative', top: '70px', left: '10px', width: '90%'}}>
                <Table 
                    loading = {state.list.loading}
                    indentSize={60} 
                    columns={columns} 
                    data={state.list.data}
                    borderCell='true'
                    pagination={false}/>
            </div>
        </div>)
}

export default List